<template>
  <div id="UserUpdatePwd">
    <el-row :gutter="20" style="margin-bottom:15px">
      <el-col :span="6">
        <el-input placeholder="请输入旧密码" v-model="oldPasswords" show-password></el-input>
      </el-col>
    </el-row> 
    <el-row :gutter="20" style="margin-bottom:15px">
      <el-col :span="6">
        <el-input placeholder="请输入新密码" v-model="newPasswords" show-password></el-input>
      </el-col>
      <el-col :span="6" v-if="true">
        <el-progress :percentage="percentage" :color="customColors" :text-inside="true" :stroke-width="30" :format="format" style="transform: translateY(5px);"></el-progress>
      </el-col>
    </el-row> 
    <el-row :gutter="20" style="margin-bottom:15px">
      <el-col :span="6">
        <el-input placeholder="请确认新密码" v-model="surePasswords" show-password></el-input>
      </el-col>
    </el-row>   
    <el-row :gutter="20" style="margin-bottom:15px">
      <el-col :span="6">
        <el-button type="primary" @click="submit">提 交</el-button>
      </el-col>
    </el-row> 
  </div>
</template>

<script>
import {updatePassword} from "@/api/user";
import { mapGetters } from 'vuex'
import {EventBus} from '@/utils/eventBus'
export default {
  name: "UserUpdatePwd",
  data() {
    return {
      oldPasswords: '',
      newPasswords: '',
      surePasswords: '',
      percentage:0,//进度条百分比
      customColors: [
        {color: '#f56c6c', percentage: 50},
        {color: '#e6a23c', percentage: 75},
        {color: '#1989fa', percentage: 100},
        {color: '#5cb87a', percentage: 101},
      ]
    }
  },
  computed: {
    ...mapGetters([
      "userInfo"              //用户角色
    ])
  },
  watch:{
    //监听新密码,改变时改变进度条百分比
    newPasswords(n){
      let tmpArr=[]
      for(let i=0;i<n.length;i++){
        let current=n[i]
        let currentAscii=current.charCodeAt()
        if(47<currentAscii&&currentAscii<58){
          tmpArr.push('num')
        }else if(64<currentAscii&&currentAscii<91){
          tmpArr.push('big')
        }else if(96<currentAscii&&currentAscii<123){
          tmpArr.push('small')
        }else{
          tmpArr.push('code')
        }
      }
      this.percentage=25*(Array.from(new Set(tmpArr)).length)
    },
  },
  methods:{
    //根据进度条指定文字内容
    format(percentage) {
      return percentage === 100 ? '完美的密码' : `密码强度${percentage}%`;
    },
    validPassword(password){
      if (password.length < 4) {
        return false
      } else {
        return true
      }
    },
    submit(){
      if(this.validPassword(this.newPasswords)){
        if(this.newPasswords===this.surePasswords){
          let params={
            userName:this.userInfo.jobNo,
            uid:this.userInfo.userId,
            oldPassword:this.oldPasswords,
            newPassword:this.newPasswords
          }
          updatePassword(params).then(()=>{
            this.$message.success('修改密码成功,请重新登陆');
            EventBus.$emit("logOut")
          })
        }else{
          this.$message.error('请重新确认密码');
        }
      }else{
        this.$message.error('密码长度不得少于四位');
      }
    },

  }
}
</script>

<style>
#UserUpdatePwd{
  padding: 0 20px;
  margin-top: 10px;
}
#UserUpdatePwd .el-progress-bar__innerText{
  color: rgba(0,0,0,0.5);
}
</style>


